<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<body>
<!--【需求】：将Vue中定义的值展示到标签的内容体中-->
<div id="app">
    <p>姓名：{{name}}</p><!--两组大括号是vue中插值表达式的方法-->
    <p>年龄：{{age}}</p>
</div>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
</body>
<script src="js/vue.js"></script>
<script>
        //1.创建Vue对象
        let vue = new Vue({

        //2.定义Vue对象接管的html代码区域
        el: "#app",

        //3.在Vue对象中定义变量或者方法
        data: { //在data中定义变量
            name: "吴贱贱",
            age: 22
        }

        //4.使用Vue中定义的变量和方法
    });
        //弹框展示vue中定义的变量
        console.log(vue);
        console.log(vue.name);
        console.log(vue.age);
</script>
</html>